<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-900 to-indigo-900 text-white p-6">
    <!-- 1. 仪表盘标题与导航 -->
    <div class="mb-6 flex justify-between items-center">
      <h1 class="text-3xl font-bold">物联网监控中心</h1>
      <div class="text-gray-400">
        最后更新: {{ currentTime }} | <span class="text-green-400">在线</span>
      </div>
    </div>

    <!-- 2. 楼层地图与设备状态模块 -->
    <div class="mb-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧雷达扫描模拟 -->
      <div class="bg-gray-800 p-4 rounded-lg shadow-lg lg:col-span-1">
        <h2 class="text-xl font-semibold mb-2">雷达扫描</h2>
        <div class="w-full h-64 bg-gray-700 rounded flex items-center justify-center">
          <span class="text-gray-500">雷达动画 (模拟)</span>
        </div>
        <div class="mt-2 text-gray-400">
          <p>检测设备: 5</p>
          <p>告警: 0</p>
        </div>
      </div>

      <!-- 中心3D楼层地图 -->
      <div class="bg-gray-800 p-4 rounded-lg shadow-lg lg:col-span-1">
        <h2 class="text-xl font-semibold mb-2">楼层地图</h2>
        <div class="w-full h-64 bg-gray-700 rounded flex items-center justify-center relative">
          <div class="absolute top-2 left-2 text-gray-400">
            <p>U01: 正常</p>
            <p>U02: 正常</p>
          </div>
          <span class="text-gray-500">3D地图 (模拟)</span>
        </div>
        <div class="mt-2 flex justify-around text-gray-400">
          <span>UPS: 5</span>
          <span>温度: 24.9°C</span>
          <span>湿度: 54%</span>
        </div>
      </div>

      <!-- 右侧设备状态 -->
      <div class="bg-gray-800 p-4 rounded-lg shadow-lg lg:col-span-1">
        <h2 class="text-xl font-semibold mb-2">设备状态</h2>
        <div class="space-y-2">
          <p class="text-gray-400">设备ID: DEV001</p>
          <p class="text-gray-400">位置: U01</p>
          <p class="text-gray-400">状态: <span class="text-green-400">在线</span></p>
          <p class="text-gray-400">IP: 192.168.1.101</p>
        </div>
      </div>
    </div>

    <!-- 3. 实时数据分析模块 -->
    <div class="mb-8">
      <h2 class="text-2xl font-semibold mb-4">实时数据分析</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 温度图表 -->
        <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
          <h3 class="text-lg font-medium text-gray-300">温度 (°C)</h3>
          <div class="chart-container mt-2">
            <LineChart :chart-data="temperatureChartData" :options="chartOptions" />
          </div>
          <p class="text-gray-400 mt-2">当前: {{ temperature }} °C</p>
        </div>
        <!-- 湿度图表 -->
        <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
          <h3 class="text-lg font-medium text-gray-300">湿度 (%)</h3>
          <div class="chart-container mt-2">
            <LineChart :chart-data="humidityChartData" :options="chartOptions" />
          </div>
          <p class="text-gray-400 mt-2">当前: {{ humidity }} %</p>
        </div>
        <!-- 压力图表 -->
        <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
          <h3 class="text-lg font-medium text-gray-300">压力 (hPa)</h3>
          <div class="chart-container mt-2">
            <BarChart :chart-data="pressureChartData" :options="chartOptions" />
          </div>
          <p class="text-gray-400 mt-2">当前: {{ pressure }} hPa</p>
        </div>
        <!-- 设备运行状态 -->
        <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
          <h3 class="text-lg font-medium text-gray-300">运行状态</h3>
          <div class="chart-container mt-2">
            <DoughnutChart :chart-data="statusChartData" :options="chartOptions" />
          </div>
          <p class="text-gray-400 mt-2">在线率: 95%</p>
        </div>
      </div>
    </div>

    <!-- 4. 控制与操作模块 -->
    <div>
      <h2 class="text-2xl font-semibold mb-4">设备控制</h2>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
        <button
            @click="refreshData"
            class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 mr-4 transition-colors"
        >
          刷新数据
        </button>
        <button
            @click="resetDevice"
            class="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors"
        >
          重置设备
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { LineChart, BarChart, DoughnutChart } from 'vue-chart-3';
import { Chart, registerables } from 'chart.js';

// 注册 Chart.js 组件
Chart.register(...registerables);

// 当前环境数据
const temperature = ref(25.3);
const humidity = ref(54);
const pressure = ref(1013.25);
const currentTime = ref(new Date().toLocaleString('zh-CN', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
}));

// 历史数据
const history = ref({
  temperature: [25.3, 25.5, 25.0, 26.1, 24.8, 25.3],
  humidity: [54, 55, 53, 56, 54, 55],
  pressure: [1013.25, 1012.8, 1013.5, 1012.9, 1013.2, 1013.25],
});

// 图表配置
const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { display: true, title: { display: true, text: '时间' } },
    y: { beginAtZero: false },
  },
  plugins: { legend: { display: false } },
};

// 计算图表数据
const temperatureChartData = computed(() => ({
  labels: ['10s ago', '8s ago', '6s ago', '4s ago', '2s ago', 'Now'],
  datasets: [{
    data: history.value.temperature,
    borderColor: 'rgba(239, 68, 68, 0.8)',
    backgroundColor: 'rgba(239, 68, 68, 0.2)',
    tension: 0.4,
    fill: true,
  }],
}));
const humidityChartData = computed(() => ({
  labels: ['10s ago', '8s ago', '6s ago', '4s ago', '2s ago', 'Now'],
  datasets: [{
    data: history.value.humidity,
    borderColor: 'rgba(59, 130, 246, 0.8)',
    backgroundColor: 'rgba(59, 130, 246, 0.2)',
    tension: 0.4,
    fill: true,
  }],
}));
const pressureChartData = computed(() => ({
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  datasets: [{
    data: history.value.pressure,
    backgroundColor: ['#3b82f6', '#3b82f6', '#3b82f6', '#3b82f6', '#3b82f6', '#3b82f6'],
    borderColor: '#3b82f6',
    borderWidth: 1,
  }],
}));
const statusChartData = computed(() => ({
  labels: ['在线', '离线'],
  datasets: [{
    data: [95, 5],
    backgroundColor: ['#22c55e', '#ef4444'],
    borderWidth: 0,
  }],
}));

// 刷新数据
const refreshData = () => {
  const newTime = new Date();
  currentTime.value = newTime.toLocaleString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
  temperature.value = (20 + Math.random() * 10).toFixed(1);
  humidity.value = (40 + Math.random() * 20).toFixed(0);
  pressure.value = (1000 + Math.random() * 20).toFixed(2);

  history.value.temperature = [...history.value.temperature.slice(1), temperature.value];
  history.value.humidity = [...history.value.humidity.slice(1), humidity.value];
  history.value.pressure = [...history.value.pressure.slice(1), pressure.value];
};

// 重置设备
const resetDevice = () => {
  temperature.value = 25.0;
  humidity.value = 50;
  pressure.value = 1013.25;

  history.value = {
    temperature: [25.0, 25.0, 25.0, 25.0, 25.0, 25.0],
    humidity: [50, 50, 50, 50, 50, 50],
    pressure: [1013.25, 1013.25, 1013.25, 1013.25, 1013.25, 1013.25],
  };
};

// 自动更新时间
onMounted(() => {
  setInterval(() => {
    currentTime.value = new Date().toLocaleString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  }, 1000);
});
</script>

<style scoped>
.chart-container {
  height: 200px;
}

.bg-gray-800 {
  background-color: rgba(31, 41, 55, 0.9);
  backdrop-filter: blur(5px);
}


.chart-container canvas {
  height: 100% !important;
}
</style>